<template>
  <div class="currencyDetail_container pl-1 pr-1">
		<div class="currencyDetail_container_currencyimg">
			<img :src="currencyInfo.url" class="mb-1" alt="">
			<div>{{currencyInfo.name}}</div>
		</div>
		<div class="currencyDetail_container_currencyInfo">
			<div class="withdrawDeposit_container_balance pl-1 pr-1 br-16 mb-1">
				<div class="balance_left">
					<span class="mr-0">{{ $t("账户余额") }}</span>
					<img v-if="showProperty" src="@/image/personalCenter/icon_xianshi@1x.png" @click="showProperty = !showProperty" alt="">
						<img v-else src="@/image/personalCenter/icon_yincang@1x.png" @click="showProperty = !showProperty" alt="">
				</div>
				<div class="balance_right">
					{{ showProperty ? currencyInfo.balance : '****'}}
				</div>
			</div>
			<!-- <div class="withdrawDeposit_container_usable pl-1 pr-1 mb-1">
				<div class="usable_left">
					<p class="mb-0">{{ $t("可用资产") }}</p>
					<p>{{ balanceInfo.usable }}</p>
				</div>
				<div class="usable_right">
					<p class="mb-0">{{ $t("不可用") }}</p>
					<p>{{ balanceInfo.unusable }}</p>
				</div>
			</div> -->
		</div>
		<div class="currencyDetail_container_record">
			<van-tabs v-model="active" color="#0086FF" background="#0C1527" title-active-color="#0086FF" title-inactive-color="#FFFFFF" :swipeable="true" :animated="true" line-height="0" @click="changeHistory">
				<van-tab v-for="(item, index) in currencyList" :key="index" :title="item.name" :name="item.id" >
					<div class="history_list br-16 pr-1 pl-1 mb-3" v-if="itemList.length">
						<div class="history_list_item pb-0" v-for="(item,index) in itemList" :key="index">
							<div class="history_list_item_title">
								<span>{{ item.name }}</span>
								<span class="history_list_item_title_sps">{{ item.price + ' ' + item.currency }}</span>
							</div>
							<div class="history_list_item_time">
								<span>{{ item.time }}</span>
								<span :class="[item.status === 1? 'text-success' : 'text-danger']">{{ item.status === 1? $t("成功") : $t("失败") }}</span>
							</div>
						</div>
					</div>
					<van-empty v-else :description="$t('暂无记录')"></van-empty>
				</van-tab>
			</van-tabs>
		</div>
		<div class="currencyDetail_container_clear"></div>
		<div class="currencyDetail_container_footer">
			<button @click="goTopUp">{{$t("充值")}}</button>
			<button @click="goWithdrawDeposit">{{$t("提现")}}</button>
		</div>
	</div>
</template>

<script>
import { getFinanceList } from "@/request/personalCenter"
export default {
	name: 'CurrencyDetail',
	data(){
		return {
			currencyInfo:{

			},
			showProperty:true,
			active:1,
			currencyList:[
				{
					id:1,
					name: this.$t("充值"),
				},
				{
					id:2,
					name: this.$t("提现"),
				},
				{
					id:3,
					name: this.$t("收入"),
				},
				{
					id:4,
					name: this.$t("支出"),
				},
			],
			itemList:[]
		}
	},
	mounted(){
		if(this.$route.params.value){
			this.currencyInfo = this.$route.params.value
		}
		if(sessionStorage.getItem('CurrencyDetail')){
			this.currencyInfo = JSON.parse(sessionStorage.getItem('CurrencyDetail'))
		}
		this.getCurrencuInfo()
	},
	methods: {
		getCurrencuInfo(){
			let obj = {
				type: this.active,
				currency: this.currencyInfo.name.toLowerCase(),
				page: 1,
				size: 100,
			}
			console.log(this.currencyInfo)
			getFinanceList(obj).then(res=>{
				if(res.code == 1){
					this.itemList=[]
					this.disposeList(res.data.data.data)
				}
			})
		},
		changeHistory(name,title){
			this.getCurrencuInfo()
		},
		disposeList(data){
			// 测试数据处理
			// for(let i=0;i<30;i++){
			// 	this.itemList.push({
			// 		id:i,
			// 		name:'测试数据'+i,
			// 		time:'2022-01-01 12:00:00',
			// 		currency:'SUDU',
			// 		price: 1541,
			// 		status: 1,
			// 	})
			// }
			data.forEach(item=>{
				this.itemList.push({
					id: item.id,
					name: item.type,
					time: item.created,
					currency: this.currencyInfo.name,
					price: item.money,
					status: 1,
				})
			})
		},
		goTopUp(){
			// 前往充值页面
			if(this.$route.name != 'TopUp'){
				this.$router.push({name: 'TopUp',
					params:{
						currencyName: this.currencyInfo.name,
						pageType: 'changeTogether',
					}
				});
			}
		},
		goWithdrawDeposit(){
			if(this.$store.state.userStore.canWithdraw){
				// 前往提现页面
				if(this.$route.name != 'WithdrawDeposit'){
					this.$router.push({
						name: 'WithdrawDeposit',
						params:{
							currency: this.currencyInfo.name
						}
					});
				}
			}else{
				this.$toast.fail(this.$t('需要持有一个正在运行中的有效订单'));
			}
		}
	}
}
</script>

<style>

</style>